<template>
  <el-dialog
      v-model="dialogVisible"
      :title="tips"
      width="30%"
      :before-close="props.callbackFunc"
  >
    <span>{{props.message}}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDel">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from 'vue'
import {messageTip, MessageTipType} from "../util/common.ts";
import {CommonModel} from "../interface/commonModel.ts";

const dialogVisible = ref(false)
const operateResult = ref<boolean>(false)

const props = defineProps<{
  dialogVisible:boolean
  message:string
  tips:string
  ids: Array<string|number>
  delFunc: (ids: Array<string|number>) => Promise<CommonModel.ApiResponse>
  callbackFunc?: (result :CommonModel.ApiResponse) => {}
}>()
onMounted(()=>{
  dialogVisible.value = props.dialogVisible
})

const handleDel = ()=>{
  props.delFunc(props.ids).then(
      data => {
        if (data.success) {
          messageTip("删除成功", MessageTipType.SUCCESS)
          dialogVisible.value = false
          operateResult.value = true
        } else {
          if (data.message){
            messageTip(data.message, MessageTipType.ERROR)
          }else {
            messageTip("删除失败", MessageTipType.ERROR)
          }
        }
        if (props.callbackFunc){
          props.callbackFunc(data)
        }
      })
}

const emit = defineEmits(['closeDialog'])

watch(() => dialogVisible.value,(value)=>{
  if (!value){
    emit('closeDialog',operateResult.value)
  }
})
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
